import React, { useEffect } from "react";
import './topic.css'
import { NavBar } from '@nutui/nutui-react';
import { ArrowLeft, DoubleArrowUp } from '@nutui/icons-react'
import { useNavigate } from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux';
import { fetchTopic } from '../store/index';

export default function topic() {
    const navigate = useNavigate();
    const dispatch = useDispatch();
    const state = useSelector(state => state)

    useEffect(() => {
        dispatch(fetchTopic());
    }, []);

    return (
        <div>
            <div className='topicNav'>
                <NavBar
                    back={
                        <>
                            <ArrowLeft width={20} height={20} onClick={() => navigate('/')} />
                        </>
                    }>
                    <h4>热门话题</h4>
                </NavBar>
            </div>
            <div className="topic">
                <ul className="ul">
                    {state.topic.map((item, index) => (
                        <li key={index}>
                            <h2>{index + 1}</h2>
                            <h3>#{item.title}</h3>
                            <h5><DoubleArrowUp className="nut-icon-am-jump  nut-icon-am-infinite" /></h5>
                            <h4>{item.hot}</h4>
                        </li>
                    ))}
                </ul>
            </div>
        </div>
    )
}
